<template>
  <div>
    <van-tabs  color="#07c160" @click="onTitleChange">
      <van-tab title="小班课">
        <van-row v-if="!loginShow" class="content-list">
          <van-col class="list-child" v-for="item in courseList" :key="item.sysCourse.id" span="11">
            <img :src="item.sysCourse.handcover" @click="courseDetail(item.sysCourse.id, 2)" alt="">
            <span>{{item.sysCourse.courseName}}</span>
            <span style="color: #ff4444">￥{{item.sysCourse.price}}</span>
          </van-col>
        </van-row>
      </van-tab>
      <van-tab title="点播课程">
        <van-row v-if="!loginShow" class="content-list">
          <van-col class="list-child" v-for="item in courseList" :key="item.sysCourse.id" span="11">
            <img :src="item.sysCourse.handcover" @click="courseDetail(item.sysCourse.id, 0)" alt="">
            <span>{{item.sysCourse.courseName}}</span>
            <span style="color: #ff4444">￥{{item.sysCourse.price}}</span>
          </van-col>
        </van-row>
      </van-tab>
      <van-tab title="直播课程">
        <van-row v-if="!loginShow" class="content-list">
          <van-col class="list-child" v-for="item in courseList" :key="item.sysCourse.id" span="11">
            <img :src="item.sysCourse.handcover" @click="courseDetail(item.sysCourse.id, 1)" alt="">
            <span>{{item.sysCourse.courseName}}</span>
            <span style="color: #ff4444">￥{{item.sysCourse.price}}</span>
          </van-col>
        </van-row>
      </van-tab>
      <div class="not-login" v-if="loginShow">
        <p>你还未登录，请登录后查看~</p>
        <van-button style="padding: 0 30px" size="small" round type="warning">立即登录</van-button>
      </div>
    </van-tabs>
    <i-footer :active="active"></i-footer>
  </div>
</template>

<script>
  import Footer from '_c/footer'
  export default {
    name: 'my-courses',
    components: {
      IFooter: Footer
    },
    data() {
      return {
        active: 1,
        loginShow: false,
        courseList: [],
        courseList1: [],
        courseList2: [],
        size: 10,
        number: 1
      }
    },
    mounted() {
      this.getCoursePage(1, 2)
    },
    methods: {
      getCoursePage (courseType, liveType) {
        let url = '/api/order/pageApp'
        let params = this.$qs.stringify({
          size: this.size,
          number: this.number,
          liveType: liveType,
          courseType: courseType
        })
        this.$post(url, params).then((res) => {
          if (res.code === 0) {
            this.courseList = res.data
          }
        })
      },
      onTitleChange(index) {
        index === 0 ? this.getCoursePage(1, 2) : index === 1 ? this.getCoursePage(2) : this.getCoursePage(1, 1)
      },
      courseDetail(id, type) {
        this.$router.push({path: '/index/learning', query: {id: id, type: type}})
      }
    }
  }
</script>

<style scoped>
 .not-login{
   width: 100%;
   margin-top: 50%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
 .not-login p{
   font-size: 24px;
 }
 .content-list{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   margin: 10px 20px;
 }
 .list-child{
   height: 360px;
   display: flex;
   margin: 12px;
   flex-direction: column;
 }
 .list-child img{
   width: 100%;
   height: 260px;
   border-radius: 15px;
 }
</style>
